body{
	font-family: Manjari, sans-serif;
	margin-left:50px;
	margin-bottom:30px;
	background-color:RGBa(127, 197, 250, 0.8);
}
strong{
	font-weight:normal;
}
h1{
	font-weight:bold;
	color:#FF9900;
	font-size:40px;
	font-family:Prompt, sans-serif;
	text-transform:uppercase;
}
a{
	text-decoration:none;
	color:black;
}
table{
	background:RGB(170,170,250);
	z-index:200;
	border-right:5px RGB(100,100,250) solid;
	border-bottom-right-radius:30px;
	border-top-right-radius:30px;
}
#menu{
	position:fixed;
	top:50px;
	left:-240px;
	transition:0.5s;
	z-index:20000000000000000000;
}
#menu:hover{
	position:fixed;
	left:0px;
}
.th{
	padding-top:30px;
	padding-bottom:30px;
	padding-right:15px;
	padding-left:15px;
	background:inherit;
	text-decoration:none;
	transition:background 1s, text-decoration 1s;
}
th{
	padding-top:30px;
	padding-bottom:30px;
	padding-right:15px;
	padding-left:15px;
	background:inherit;
	text-decoration:none;
}
.th:hover{
	background:radial-gradient(circle,RGB(200,200,250)5%,RGB(170,170,250)90%);
	border-radius:100px;
}
#logo{
	height:90px;
	position:absolute;
	top:110px;
	left:270px;
	z-index:299;
	background:RGB(200,208,250);
	border-left:none;
	border-bottom:3px solid RGB(100, 137, 200);
	border-top:3px solid RGB(100, 137, 200);
	border-right:3px solid RGB(100, 137, 200);
	border-top-right-radius:30px;
	border-bottom-right-radius:30px;
}
p{
	margin-left:130px;
	margin-right:20px;
}
.alinéa{
	margin-left:50px;
}
h3{
	margin-left:130px;
	color:RGB(100, 100, 250);
	font-size:25px;
}
.img{
	position:relative;
	left:400px;
	width:500px;
}
ul{
	font-weight:bold;
}
li{
	display:list-item;
	list-style-type:none;
	text-align:center;
	padding:10px;
}
.vignette{
	width:100px;
}
#compositeur{
	position:absolute;
	left:300px;
	top:890px;
	transform:rotate(-12deg);
}
#mozart{
	position:absolute;
	left:980px;
	top:845px;
	transform:rotate(25deg);
}
#film{
	position:absolute;
	left:1070px;
	top:1000px;
	transform:rotate(20deg);
}
#marche{
	position:absolute;
	left:155px;
	top:1010px;
	width:215px;
}
#concert_printemps::before{
	content:"Chaque année, l’Harmonie organise son concert annuel de printemps vers la mi mars.";
	float:right;
	position:relative;
	top:-40px;
	left:-360px;
	text-align:center;
	width:400px;
}
#cérémonie_officielle{
	position:absolute;
	left:200px;
	top:1675px;
}
#cérémonie_officielle::before{
	content:"Les cérémonies officielles";
	float:right;
	position:relative;
	top:-25px;
	left:-325px;
}
.manif_img{
	width:450px;
	height:337px;
}
#concert{
	position:absolute;
	left:730px;
	top:1655px;
}
#concert::before{
	content:"Les concerts";
	float:right;
	position:relative;
	top:-7px;
	left:-250px;
}
#festival_aubade{
	position:absolute;
	left:200px;
	top:2050px;
}
#festival_aubade::before{
	content:"Les festivals de musique, aubades et animations";
	float:right;
	position:relative;
	top:-25px;
	left:-400px;
}
#animation{
	position:absolute;
	left:730px;
	top:2050px;
}
#animation::before{
	content:"Les animation pour des fêtes de villages";
	float:right;
	position:relative;
	top:-25px;
	left:-160px;
	display:inline;
}
#manif_img_last{
	position:relative;
	top:-15px;
}
p:last-child{
	position:absolute;
	top:2400px;
	font-weight:bolder;
	font-size:22px;
	padding-bottom:30px;
	margin-left:240px;
}
strong{
	font-weight:inherit;
}
#a_blue{
	color:blue;
}
#a_blue:hover{
	text-decoration:underline;
}
.mobile_visible{
	display:none;
}
@media screen and (max-device-width : 500px){
	body{
		width:auto;
		height:auto;
		margin-left:10px;
		margin-top:45px;
	}
	h1{
		font-size:1.2em;
		margin-left:0px;
	}
	.mobile_visible{
		display:block;
	}
	.mobile_unvisible{
		display:none;
	}
	table{
		border-right:none;
		border-top-right-radius:0px;
		border-bottom-left-radius:20px;
		border-bottom-right-radius:20px;
		border-bottom:0.2em solid RGB(100,100,250);
	}
	#menu_target_mobile_open{
		-moz- position:relative;
		position:relative;
		-moz- top:-15em;
		top:-13.95em;
	}
	#menu_target_mobile_open:target{
		position:relative;
		top:0px;
	}
	#menu_target_mobile_close:target{
		position:relative;
		top:0px;
	}
	#menu{
		position:fixed;
		top:0px;
		left:5.3em;
		z-index:4589025678907642345678963234567876543456789876543456734567897654569809284584;
		height:14em;
		width:auto;
		overflow:hidden;
		border-bottom-left-radius:20px;
		border-bottom-right-radius:20px;
		animation-iteration-count:0;
	}
	#menu:hover{
		position:fixed;
		left:5.3em;
	}
	.mobile_flèches{
		width:1.5em;
		margin-left:0.3em;
		margin-right:0.3em;
		margin-top:0.02em;
	}
	.mobile_menu_button_txt{
		margin-left:3em;
		margin-right:3em;
	}
	.mobile_menu_button{
		padding-left:0.5em;
	}
	.th{
		padding-top:0.4em;
		padding-bottom:0.4em;
		padding-right:0.5em;
		padding-left:0.5em;
		font-size:0.8em;
	}
	th{
		padding-top:0.4em;
		padding-bottom:0.4em;
		padding-right:0.5em;
		padding-left:0.5em;
		font-size:0.8em;
	}
	p{
		margin-left:0px;
		margin-right:10px;
		font-size:0.7em;
	}
	.alinéa{
		margin-left:25px;
	}
	h3{
		margin-left:0px;
		color:RGB(100, 100, 250);
		font-size:0.95em;
	}
	li{
		display:list-item;
		list-style-type:none;
		text-align:center;
		padding:0px;
		-moz- font-size:10px;
		font-size:10px;
	}
	ul{
		margin:0px auto;
		position:relative;
		left:-30px;
	}
	.vignette{
		width:5em;
		margin-bottom:1em;
	}
	#compositeur{
		position:static;
		transform:rotate(-12deg);
	}
	#mozart{
		position:static;
		transform:rotate(20deg);
	}
	#film{
		position:static;
		transform:rotate(20deg);
	}
	#marche{
		position:static;
		width:11em;
		margin-top:10px;
	}
	#concert_printemps{
		position:static;
		margin-bottom:30px;
	}
	#concert_printemps::before{
		content:"Chaque année, l’Harmonie organise son concert annuel de printemps vers la mi mars.";
		float:right;
		position:relative;
		top:-10px;
		left:0px;
		font-size:0.7em;
		width:auto;
		text-align:center;
	}
	#cérémonie_officielle{
		position:static;
		margin-bottom:30px;
	}
	#cérémonie_officielle::before{
		content:"Les cérémonies officielles";
		float:right;
		position:relative;
		top:-10px;
		left:-80px;
		font-size:0.7em;
		text-align:center;
	}
	.manif_img{
		width:17.5em;
		height:12.5em;
	}
	.img{
		position:static;
		width:17.5em;
	}
	.mobile_img{
		margin:0px 8%;
		width:17.5em;
	}
	#concert{
		position:static;
		margin-bottom:30px;
	}
	#concert::before{
		content:"Les concerts";
		float:right;
		position:relative;
		top:-10px;
		left:-100px;
		font-size:0.7em;
		text-align:center;
	}
	#festival_aubade{
		position:static;
		margin-bottom:45px;
	}
	#festival_aubade::before{
		content:"Les festivals de musique, aubades et animations";
		float:right;
		position:relative;
		top:-10px;
		left:-20px;
		font-size:0.7em;
	}
	#animation{
		position:static;
		margin-bottom:20px;
	}
	#animation::before{
		content:"Les animation pour des fêtes de villages";
		float:right;
		position:relative;
		top:-25px;
		left:-40px;
		font-size:0.7em;
	}
	#prop{
		position:static;
		font-weight:bolder;
		font-size:0.80em;
		padding-bottom:0px;
		margin-left:5px;
	}
}